<template>
  <div class="category-container">
    <el-menu :default-active="activeIndex" mode="horizontal">
      <el-menu-item v-for="category in categories" :key="category.cid" :index="category.cid">
        {{ category.name }}
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'CategoryComponent',
  data() {
    return {
      activeIndex: '001',
      categories: [
        // 根据提供的数据填充类别
        { cid: '001', name: '电子产品' },
        { cid: '002', name: '服饰鞋帽' },
        { cid: '003', name: '家电厨具' },
        { cid: '004', name: '个人洁护' },
        { cid: '005', name: '绿色出行' }
      ]
    };
  },
};
</script>

<style scoped>
.category-container {
  padding: 10px;
}
</style>